<%@ page import="java.util.ArrayList" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主页-网上书店My-eBookStore</title>
    <link rel="shortcut icon" href="http://www.sdust.edu.cn/images/favicon.ico" mce_href="images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="http://www.sdust.edu.cn/images/favicon.ico" mce_href="images/favicon.ico" type="image/x-icon">

</head>
<style>
    ul.pagination {
        display: inline-block;
        padding: 0;
        margin: 0;
    }

    ul.pagination li {display: inline;}

    ul.pagination li a {
        color: #FF4500;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        transition: background-color .3s;
        border: 1px solid #ddd;
    }

    .pagination li:first-child a {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .pagination li:last-child a {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    ul.pagination li a.active {
        background-color: #FF4500;
        color: white;
        border: 1px solid #FF4500;
    }

    ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
<style>
    .button {
        background-color: #FF4500; /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
    }
    .button3 {
        background-color: white;
        color: black;
        border: 2px solid #FF4500;
    }

    .button3:hover {
        background-color: #FF4500;
        color: white;
    }

</style>

<jsp:include page="head.jsp"></jsp:include>
<jsp:include page="browse.jsp"></jsp:include>
<%@page import="bean.*"%> <%@page import="dao.*"%>
<%
    Bookdao bookdao = new Bookdao();
    String pp = request.getParameter("id");
    String kind = request.getParameter("kind");
    ArrayList books = null;
    if(kind == null){
        books = bookdao.getAllBooks();
    }else{
        books = bookdao.getBooks(kind);
    }
    int npage = Integer.valueOf(pp);
    if (npage < 0) npage = 0;
%>
<table  border="1" style="border-color: #DCDCDC" width="100%" height="1860" align="center" cellpadding="0" cellspacing="0">
    <%
        int j,i;
        for(i = 0; i < 6; i++) {
            out.print("<tr>");

            for( j = 0; j < 4; j++) {
                int now = npage + i * 4 + j;
                if(now >= books.size()) break;
                out.print("<td align=\"center\" bgcolor=\"#ccffff\">");
                out.print("<a href=\"abook.jsp?id=" + ((Book) books.get(now)).getIsbn() + "\" target=\"_blank\">");
                out.print("<img width=\"300\" height=\"300\" src=" + ((Book) books.get(now)).getLinktoimg() +
                        " alt=\"" + ((Book) books.get(now)).getName() + "\" title=\"" + ((Book) books.get(now)).getName() + "\">");
                out.print("</a>");
                out.print("</td>");
            }
            if(j<4){
                for(int k=0 ; k < 4-j; k++){
                    out.print("<td align=\"center\" bgcolor=\"#ccffff\"  width=\"300\" height=\"300\">");
                    out.print("</td>");
                }
                break;
            }
            out.print("</tr>");
        }
        if(i < 6){
            for(int k = 0; k < 5-i; k++){
                out.print("<tr>");
                for(int p = 0 ; p < 4 ; p++){
                    out.print("<td align=\"center\" bgcolor=\"#ccffff\"  width=\"300\" height=\"300\">");
                    out.print("</td>");
                }
                out.print("</tr>");
            }
        }
    %>
    <%if(kind == null){%>
    <tr align="center" style="height: 60px;">
        <td colspan="4">
            <ul class="pagination">
                <li><a href="main.jsp?id=0">首页</a></li>
                <li><a href="main.jsp?id=<%=npage>=24? npage-24:0%>">«</a></li>
                <li><a class="active" href="main.jsp?id=<%=npage%>"><%=npage / 24 + 1%></a></li>
                <li><a href="main.jsp?id=<%=npage+24%>"> <%=npage/24 + 2%> </a></li>
                <li><a href="main.jsp?id=<%=npage+48%>"> <%=npage/24 + 3%> </a></li>
                <li><a href="main.jsp?id=<%=npage+24%>">»</a></li>
                <li><a href="main.jsp?id=<%=books.size() / 24 * 24%>">尾页</a></li>
            </ul>
        </td>
    </tr>
    <%}else{%>
    <tr align="center" style="height: 60px;">
        <td colspan="4">
            <ul class="pagination">
                <li><a href="main.jsp?id=0&kind=<%=kind%>">首页</a></li>
                <li><a href="main.jsp?id=<%=npage>=24? npage-24:0%>&kind=<%=kind%>">«</a></li>
                <li><a class="active" href="main.jsp?id=<%=npage%>&kind=<%=kind%>"><%=npage / 24 + 1%></a></li>
                <li><a href="main.jsp?id=<%=npage+24%>&kind=<%=kind%>"> <%=npage/24 + 2%> </a></li>
                <li><a href="main.jsp?id=<%=npage+48%>&kind=<%=kind%>"> <%=npage/24 + 3%> </a></li>
                <li><a href="main.jsp?id=<%=npage+24%>&kind=<%=kind%>">»</a></li>
                <li><a href="main.jsp?id=<%=books.size() / 24 * 24%>&kind=<%=kind%>">尾页</a></li>
            </ul>
        </td>
    </tr><%}%>
</table>
<jsp:include page="tail.jsp"></jsp:include>
</body>
</html>
